<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-section">
			<view class="search-box">
				<input class="search-input" placeholder="请输入试卷名搜索" />
				<view class="search-icon">🔍</view>
			</view>
		</view>

		<!-- 考试列表 -->
		<view class="exam-list">
			<!-- 考试项目1 - 未发布 -->
			<view class="exam-card">
				<view class="card-content">
					<view class="left-section">
						<view class="exam-icon orange">
							<view class="icon-placeholder">📅</view>
						</view>
						<view class="status-label unpublished">未发布</view>
					</view>
					
					<view class="middle-section">
						<text class="exam-title">2024-2025年上学期九年级3月第一次模考</text>
						<text class="exam-type">考试类型：校内考试</text>
						<text class="exam-time">考试时间：2024-11-19</text>
					</view>
					
					<view class="right-section">
						<button class="publish-btn" @click="goToPublish">去发布 ></button>
					</view>
				</view>
				
				<view class="exam-actions">
					<button class="action-btn review" @click="showSubjectModal('review')">📋 试卷讲评</button>
					<button class="action-btn results" @click="showSubjectModal('results')">📊 成绩查询</button>
				</view>
			</view>

			<!-- 考试项目2 - 部分发布 -->
			<view class="exam-card">
				<view class="card-content">
					<view class="left-section">
						<view class="exam-icon blue">
							<view class="icon-placeholder">📋</view>
						</view>
						<view class="status-label partial">部分发布</view>
					</view>
					
					<view class="middle-section">
						<text class="exam-title">2024-2025年上学期九年级3月第一次模考</text>
						<text class="exam-type">考试类型：统考联考</text>
						<text class="exam-time">考试时间：2024-11-19</text>
					</view>
					
					<view class="right-section">
						<button class="publish-btn" @click="goToPublish">去发布 ></button>
					</view>
				</view>
				
				<view class="exam-actions">
					<button class="action-btn review" @click="showSubjectModal('review')">📋 试卷讲评</button>
					<button class="action-btn results" @click="showSubjectModal('results')">📊 成绩查询</button>
				</view>
			</view>

			<!-- 考试项目3 - 全部发布 -->
			<view class="exam-card">
				<view class="card-content">
					<view class="left-section">
						<view class="exam-icon green">
							<view class="icon-placeholder">✅</view>
						</view>
						<view class="status-label published">全部发布</view>
					</view>
					
					<view class="middle-section">
						<text class="exam-title">2024-2025年上学期九年级3月第一次模考</text>
						<text class="exam-type">考试类型：单元测试</text>
						<text class="exam-time">考试时间：2024-11-19</text>
					</view>
					
					<view class="right-section">
						<!-- 全部发布状态没有按钮 -->
					</view>
				</view>
				
				<view class="exam-actions">
					<button class="action-btn review" @click="showSubjectModal('review')">📋 试卷讲评</button>
					<button class="action-btn results" @click="showSubjectModal('results')">📊 成绩查询</button>
				</view>
			</view>
		</view>

		<!-- 科目选择弹窗 -->
		<StudentListModal
			:visible="showModal"
			:tabs="modalTabs"
			:subjects="subjects"
			:displayMode="'subject'"
			:defaultActiveTab="modalType"
			@close="hideModal"
			@tab-change="switchTab"
			@subject-select="selectSubject"
		/>
	</view>
</template>

<script>
import StudentListModal from '@/components/StudentListModal.vue';

export default {
	components: {
		StudentListModal
	},
	data() {
		return {
			showModal: false,
			modalType: '',
			modalTabs: [],
			modalStudentData: {},
			subjects: [
				{ id: 1, name: '全科', icon: '🔲', color: 'cyan' },
				{ id: 2, name: '语文', icon: '📖', color: 'orange' },
				{ id: 3, name: '英文', icon: '📚', color: 'yellow' },
				{ id: 4, name: '数学', icon: '🔢', color: 'purple' },
				{ id: 5, name: '政治', icon: '⭐', color: 'red' },
				{ id: 6, name: '地理', icon: '🌍', color: 'blue' },
				{ id: 7, name: '历史', icon: '🏛️', color: 'brown' },
				{ id: 8, name: '化学', icon: '🧪', color: 'light-blue' },
				{ id: 9, name: '物理', icon: '⚡', color: 'teal' },
				{ id: 10, name: '生物', icon: '🧬', color: 'green' }
			]
		}
	},
	onLoad() {
		
	},
	methods: {
		showSubjectModal(type) {
			this.modalType = type;
			// 设置Tab数据
			this.modalTabs = [
				{ key: 'review', label: '试卷讲评' },
				{ key: 'results', label: '成绩查询' }
			];
			this.showModal = true;
		},
		hideModal() {
			this.showModal = false;
		},
		switchTab(type) {
			this.modalType = type;
		},
		selectSubject(subject) {
			console.log(`选择了${subject.name}的${this.modalType === 'review' ? '试卷讲评' : '成绩查询'}`);
			
			if (this.modalType === 'review') {
				// 跳转到试卷讲评页面
				uni.navigateTo({
					url: `/pages/paper-review/paper-review?subject=${encodeURIComponent(subject.name)}&type=${encodeURIComponent('试卷讲评')}`
				});
			} else {
				// 跳转到成绩查询页面的年级报告tab
				uni.navigateTo({
					url: `/pages/grade-query/grade-query?subject=${encodeURIComponent(subject.name)}&tab=year&type=${encodeURIComponent('成绩查询')}`
				});
			}
			
			this.hideModal();
		},
		// 跳转到发布成绩页面
		goToPublish() {
			console.log('跳转到发布成绩页面');
			uni.navigateTo({
				url: '/pages/publish-grade/publish-grade'
			});
		}
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@secondary-color: #81C784;
@text-color: #333;
@text-light: #666;
@text-lighter: #999;
@white: #fff;
@border-color: #F0F0F0;

.container {
	min-height: 100vh;
	background: linear-gradient(135deg, @primary-color 0%, @secondary-color 100%);
	padding: 20rpx;
}

// 搜索框
.search-section {
	padding: 30rpx 20rpx;

	.search-box {
		position: relative;
		background: @white;
		border-radius: 50rpx;
		padding: 20rpx 60rpx 20rpx 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

		.search-input {
			width: 100%;
			font-size: 28rpx;
			color: @text-light;
			border: none;
			outline: none;
		}

		.search-icon {
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
			font-size: 32rpx;
			color: @primary-color;
		}
	}
}

// 考试列表
.exam-list {
	padding: 0 20rpx;

	.exam-card {
		background: @white;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);
		overflow: hidden;

		.card-content {
			display: flex;
			align-items: flex-start;
			padding: 24rpx;
			gap: 20rpx;

			.left-section {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 12rpx;
				flex-shrink: 0;

				.exam-icon {
					width: 72rpx;
					height: 72rpx;
					border-radius: 12rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 2rpx solid rgba(255, 255, 255, 0.3);

					&.orange { background: #FFE0B2; }
					&.blue { background: #E3F2FD; }
					&.green { background: #E8F5E8; }

					.icon-placeholder {
						font-size: 28rpx;
					}
				}

				.status-label {
					padding: 6rpx 12rpx;
					border-radius: 12rpx;
					font-size: 20rpx;
					font-weight: bold;
					color: @white;
					text-align: center;
					min-width: 72rpx;

					&.unpublished { background: #FF9800; }
					&.partial { background: #2196F3; }
					&.published { background: #4CAF50; }
				}
			}

			.middle-section {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 8rpx;

				.exam-title {
					font-size: 30rpx;
					font-weight: bold;
					color: @text-color;
					line-height: 1.4;
					margin-bottom: 4rpx;
				}

				.exam-type, .exam-time {
					font-size: 24rpx;
					color: @text-light;
				}
			}

			.right-section {
				flex-shrink: 0;
				display: flex;
				align-items: center;

				.publish-btn {
					background: #00BCD4;
					color: @white;
					border: none;
					padding: 12rpx 20rpx;
					font-size: 22rpx;
					font-weight: bold;
					position: relative;
					min-width: 120rpx;
					clip-path: polygon(
						15rpx 0%, 
						calc(100% - 15rpx) 0%, 
						100% 15rpx, 
						100% calc(100% - 15rpx), 
						calc(100% - 15rpx) 100%, 
						0% 100%, 
						15rpx calc(100% - 15rpx), 
						30rpx 15rpx
					);
					border-radius: 15rpx;
				}
			}
		}

		.exam-actions {
			display: flex;
			border-top: 1rpx solid @border-color;

			.action-btn {
				flex: 1;
				border: none;
				padding: 24rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 8rpx;
				background: transparent;

				&:first-child {
					border-right: 1rpx solid @border-color;
				}

				&.review { color: @primary-color; }
				&.results { color: #FFB74D; }
			}
		}
	}
}


</style>